"use client"
import React from 'react'
import AppLayout from '@/commponent/index'
import { Col, Divider, Row, Flex, Layout, Card, Progress, Select, Button, Space } from 'antd';
import './shouye/indes.min.css'
import { UserAddOutlined, BulbOutlined, DollarOutlined, FileTextOutlined, FileAddOutlined, RightOutlined, EditOutlined,AlertOutlined, FileProtectOutlined, FileSearchOutlined, FileOutlined, PayCircleOutlined, PlusOutlined } from '@ant-design/icons'
import dayjs from 'dayjs';
import {useRouter}from 'next/navigation'

const style: React.CSSProperties = { background: '#0092ff', padding: '8px 0' };
const layoutStyle = {
    borderRadius: 8,
    overflow: 'hidden',
    background: "rgb(240, 242, 245)"
};
const headerStyle: React.CSSProperties = {
    textAlign: 'center',
    height: 64,
    paddingInline: 48,
    lineHeight: '64px',
    background: "white",
    width: "100%",
    padding: "0"
};

const contentStyle: React.CSSProperties = {
    textAlign: 'center',
    minHeight: 120,
    lineHeight: '120px',
    color: '#fff',
    marginTop: "20px"
};
const { Header, Footer, Sider, Content } = Layout;
function page() {
    const ContextItems = [
        {
            id: 1,
            title: "新建客户",
            icon: <UserAddOutlined />,
            num: 200
        },
        {
            id: 2,
            title: "新建线索",
            icon: <BulbOutlined />,
            num: 200
        },
        {
            id: 3,
            title: "新建商机",
            icon: <DollarOutlined />,
            num: 200
        },
        {
            id: 4,
            title: "新建订单",
            icon: <FileTextOutlined />,
            num: 200
        },
        {
            id: 5,
            title: "新建联系人",
            icon: <FileAddOutlined />,
            num: 200
        },
        {
            id: 6,
            title: "写新跟进",
            icon: <EditOutlined />,
            num: 200
        },
        {
            id: 7,
            title: "新建任务",
            icon: <FileProtectOutlined />,
            num: 200
        },
        {
            id: 8,
            title: "新建工单",
            icon: <FileSearchOutlined />,
            num: 200
        },
        {
            id: 9,
            title: "新建回款单",
            icon: <FileOutlined />,
            num: 200
        },
        {
            id: 10,
            title: "回款计划",
            icon: <PayCircleOutlined />,
            num: 200
        },
    ]
    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };
    const SystemAnnouncement = [
        {
            id: 1,
            title: "内部分享",
            desc: "如何建立良好的客户关系",
            time: 1745379263805
        },
        {
            id: 2,
            title: "内部分享",
            desc: "如何建立良好的客户关系",
            time: 1745379263805
        },
        {
            id: 3,
            title: "内部分享",
            desc: "如何建立良好的客户关系",
            time: 1745379263805
        },
        {
            id: 4,
            title: "内部分享",
            desc: "如何建立良好的客户关系",
            time: 1745379263805
        },
        {
            id: 5,
            title: "内部分享",
            desc: "如何建立良好的客户关系",
            time: 1745379263805
        },
        {
            id: 6,
            title: "内部分享",
            desc: "如何建立良好的客户关系",
            time: 1745379263805
        },
        {
            id: 7,
            title: "内部分享",
            desc: "如何建立良好的客户关系",
            time: 1745379263805
        },
    ]
    const router=useRouter()
    const createclick=(id:number)=>{
        if(id==1){
            router.push("/home/kehu")
        }
    }
    return (
        <AppLayout>
            <Layout style={layoutStyle}>

                <Content style={contentStyle}>
                    <div className='context'>
                        <div className='header'>
                            <Row>
                                <Col flex={1}>
                                    <div>
                                        <Card className='cartItem'>
                                            <div className='header-one-title'>月销售金额(元)</div>
                                            <div className='salesAmount'>120,000</div>
                                            <div className='header-one'>
                                                <div className='header-one-xb'>周同比12<span className='reds'></span>％</div>
                                                <div className='header-one-xb'>日环比12<span className='down-arrow'></span>％</div>
                                            </div>

                                        </Card>
                                    </div>
                                </Col>
                                <Col flex={1}>
                                    <div>
                                        <Card className='cartItem' >
                                            <div className='header-one-title'>月回款金额(元)</div>
                                            <div className='salesAmount'>10000</div>
                                            <img className='hkimg' src="/images/huikuan.png" alt="" />
                                        </Card>
                                    </div>
                                </Col>
                                <Col flex={1}>
                                    <div>
                                        <Card className='cartItem' >
                                            <div className='header-one-title'>本月成交订单</div>
                                            <div className='salesAmount'>1000</div>
                                            <img className='hkimg' src="/images/image.png" alt="" />
                                        </Card>
                                    </div>
                                </Col>
                                <Col flex={1}>
                                    <div>
                                        <Card className='cartItem'>
                                            <div className='header-one-title'>完成销售目标</div>
                                            <div className='header-one-title-flex-bottom'>
                                                <div className='salesAmount'>75%</div>
                                                <Progress type="circle" percent={75} showInfo={false} size={100} />
                                            </div>

                                        </Card>
                                    </div>
                                </Col>
                                <Col flex={1}>
                                    <div>
                                        <Card className='cartItem'>
                                            <div className='header-one-title'>回款达成率</div>
                                            <div className='salesAmount'>80%</div>
                                            <Progress strokeLinecap="butt" percent={80} />
                                        </Card>
                                    </div>
                                </Col>
                            </Row>
                        </div>
                        <div className='create'>
                            <div className='create-header'>
                                <p>快速新建</p>
                            </div>
                            <div className='create-context'>
                                {
                                    ContextItems.map(d => {
                                        return <div key={d.id} className='create-context-item' onClick={()=>{createclick(d.id)}}>
                                            <span className='create-context-item-icon'>{d.icon}</span>
                                            <span className='create-context-item-text'>{d.title}</span>
                                        </div>
                                    })
                                }

                            </div>
                        </div>
                        <div className='bottom'>
                            <Row gutter={[8, 8]}>
                                <Col span={12}>
                                    <div className='bottom-left'>
                                        <div className='bottom-left-header'>
                                            <div className='bottom-left-header-text'>
                                                数据简报
                                            </div>
                                            <div className='bottom-left-header-select'>
                                                <Space>
                                                    <Select defaultValue="公司简报"
                                                        style={{ width: 120 }}
                                                        onChange={handleChange}
                                                        options={[
                                                            { value: '1', label: '公司简报' },
                                                            { value: '2', label: '新增客户' },
                                                            { value: '3', label: '新增线索' },
                                                            { value: '3', label: '新增订单' },
                                                        ]}
                                                    />
                                                    <Select
                                                        defaultValue="本周"
                                                        style={{ width: 120 }}
                                                        onChange={handleChange}
                                                        options={[
                                                            { value: '1', label: '本日' },
                                                            { value: '2', label: '本月' },
                                                            { value: '3', label: '本季度' },
                                                            { value: '3', label: '本年' },
                                                        ]}
                                                    />
                                                </Space>
                                            </div>
                                        </div>
                                        <div className='bottom-left-context'>
                                            {
                                                ContextItems.map(d => {
                                                    return <div key={d.id} className='bottom-left-context-item'>
                                                        <span className='bottom-left-context-item-title'>{d.title}</span>
                                                        <span className='bottom-left-context-item-num'>{d.num}</span>
                                                    </div>
                                                })
                                            }
                                        </div>
                                    </div>
                                </Col>
                                <Col span={12}>

                                    <div className='bottom-right'>
                                        <div className='bottom-right-header'>
                                            <div className='bottom-right-header-text'>
                                                数据简报
                                            </div>
                                            <div className='bottom-right-header-select'>
                                                <Space>
                                                    <Button color="default" variant="outlined"><span><PlusOutlined /></span>发布公告</Button>
                                                    <Button color="default" variant="outlined">查看更多<span><RightOutlined /></span></Button>
                                                </Space>
                                            </div>
                                        </div>
                                        <div className='bottom-right-context'>
                                            <div className='bottom-right-context-item'>
                                                <ul>
                                                    {
                                                        SystemAnnouncement.map(d => {
                                                            return <li key={d.id}>
                                                                <div className='bottom-right-context-item-header'>
                                                                    <span className='bottom-right-context-item-left'>【{d.title}】</span>
                                                                    <span className='bottom-right-context-item-center'>{d.desc}</span>
                                                                </div>
                                                                <div className='bottom-right-context-item-bottom'>
                                                                    <div className='bottom-right-context-item-right'><span><AlertOutlined /></span>{dayjs(d.time).format('YYYY-MM-DD HH:mm:ss')}</div>
                                                                </div>
                                                            </li>
                                                        })
                                                    }
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </Col>
                            </Row>

                        </div>
                    </div>
                </Content>
            </Layout>

        </AppLayout>

    )

}

export default page